<template>
  <div class="login-container">
    <div class="login-box">
      <!-- 头像区域 -->
      <div class="avatar_box">
        <img src="../assets/logo.png" alt />
      </div>
      <!-- 表单区域 -->
      <div class="input-wrap">
        <el-form label-width="0" :model="userInfo" :rules="loginFormRule" ref="loginFormRef">
          <el-form-item prop="username">
            <el-input prefix-icon="iconfont icon-user" v-model="userInfo.username"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              prefix-icon="iconfont icon-3702mima"
              v-model="userInfo.password"
              type="password"
            ></el-input>
          </el-form-item>

          <el-form-item class="btn-group">
            <el-button type="primary" @click="handleLogin">登录</el-button>
            <el-button type="info" @click="handleResetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        username: '',
        password: ''
      },
      loginFormRule: {
        username: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          { min: 3, max: 11, message: '长度在 3 到 11 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入用户密码', trigger: 'blur' },
          { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    async handleLogin() {
      /****
       * 1. 点击登录, 先判断表单数据是否符合要求
       */
      const flag = await this.$refs.loginFormRef.validate()

      if (!flag) return
      const { data: res } = await this.$http.post('login', this.userInfo)
      if (res.meta.status !== 200) return this.$showToast.error('登录失败')
      this.$showToast.success('登录成功')
      /* *
       *  1. 将登录成功后的token,保存在客户端的sessionStorage中
       *  1.1 项目中除了登录之外的其他API接口, 必须在登录之后才能访问
       *  1.2 token 只应在当前网页打开期间生效, 所以将token保存在sessionStorage中
       * 2. 通过链式编程导航跳转到后台主页, 路由地址是: /home
       */
      window.sessionStorage.setItem('token', res.data.token)
      this.$router.push('/home') // 登录成功后跳转到首页
    },
    handleResetForm() {
      this.$refs.loginFormRef.resetFields() //  对整个表单进行重置,将所有字段值重置为初始值并移除校验结果
    }
  }
}
</script>

<style lang='less' scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #2b4b6b;
  .login-box {
    width: 450px;
    height: 300px;
    border-radius: 3px;
    background-color: #fff;

    .avatar_box {
      width: 130px;
      height: 130px;
      border: 1px solid #ddd;
      border-radius: 50%;
      padding: 10px;
      margin: -55px auto 0;
      box-shadow: 0 0 5px #ddd;
      background-color: #fff;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #eee;
      }
    }
  }

  .input-wrap {
    margin: 25px;
    .btn-group {
      text-align: right;
    }
  }
}
</style>
